<template>
	<view class="wrap">
		<view class="menu">
			<view class="tab-change">
				<view :class="{'active':nowindex==1}" class="tab-item" @click="tabClick(1)">
					团购
				</view>
				<view :class="{'active':nowindex==2}" class="tab-item" @click="tabClick(2)">
					销售
				</view>
				<view :class="{'active':nowindex==3}" class="tab-item" @click="tabClick(3)">
					售出
				</view>
				<view :class="{'active':nowindex==4}" class="tab-item" @click="tabClick(4)">
					我的
				</view>
				
			</view>
		</view>
		
		<view class="tuangou" v-show="nowindex==1">
			<view class="tuangou-item" v-for="(item,index) in tuangou"  :key="index" @click="enterpage(item)">
				<view class="img-wrap" :class="{'reservation':item.sign=='reservation','waiting':item.sign=='waiting'}">
					<image   :src="item.cover" mode=""></image>
				</view>
				<view class="tuangou-desc">
					<view>
						{{item.name}}
					</view>
					<view class="price">
						{{item.price}}
					</view>
				</view>
			</view>
		</view>
		<view class="xiaoshou" v-show="nowindex==2">
			
			<view class="title">
				<view @click="tabxiaoshou(1)" class="list-nav" :class="{'active':wodetype==1}">
					团队销售
				</view>
				<view @click="tabxiaoshou(2)" class="list-nav" :class="{'active':wodetype==2}">
					我的销售
				</view>
			</view>
			
			<view class="card-xiaoshou" v-show="wodetype==1">
				<view class="dai">
					<view>待销售</view>
					<view style="padding-top:30rpx">{{xiaoshou.on_sale}}</view>
				</view>
				<view class="yi">
					<view>已销售</view>
					<view style="padding-top:30rpx">{{xiaoshou.sold}}</view>
				</view>
			</view>
			
			
			<view class="list-wrap" v-show="wodetype==1">
				<view class="list-item"  v-for="(item,index) in xiaoshou.sales" :key="index">
					<view class="item-title" style="font-size:35rpx;padding-bottom:8rpx;">
						{{item.name}}
					</view>
					<view class="info">
						<view class="left">
							{{item.subtitle}}
						</view>
						<view class="right" style="color:#f75507;font-size:34rpx">
							{{item.amount}}
						</view>
					</view>
				</view>
			</view>
			<view class="list-wrap" v-show="wodetype==2">
				<view class="list-item" :class="{'xiaoshouzhong':item.sign=='on_sale'}"  v-for="(item,index) in dxiaoshou" :key="index" @click="enterdaixiaoshou(item)">
					<view class="item-title" style="font-size:35rpx;padding-bottom:8rpx;">
						{{item.name}}
					</view>
					<view class="info">
						<view class="left">
							{{item.subtitle}}
						</view>
						<view class="right" style="color:#f75507;font-size:34rpx">
							{{item.amount}}
						</view>
					</view>
				</view>
				<uni-load-more  :status="more">
				</uni-load-more>
			</view>
			
			
			
		</view>
		<view class="wodelist-wrap" v-show="nowindex==4">
			<view class="wodelist-item" :class="{'paiduizhong':item.sign=='queuing','completed':item.sign=='completed'}"  v-for="(item,index) in wodelist" :key="index">
				<view class="left">
					<view>{{item.name}}</view>
					<view style="color:#f81b1e;padding-top:8rpx">{{item.subtitle}}</view>
				</view>
				<view class="right" style="color:#f81b1e">
					{{item.amount}}
				</view>
			</view>
			<uni-load-more  :status="more">
			</uni-load-more>
		</view>
		
		<view class="wodelist-wrap" v-show="nowindex==3">
			<view @click="jinru(item)" class="wodelist-item" :class="{'shouchuzhong':item.sign=='on_sell'}" v-for="(item,index) in yishoulist" :key="index">
				<view class="left">
					<view>{{item.name}}</view>
					<view style="color:#f81b1e;padding-top:8rpx">{{item.subtitle}}</view>
				</view>
				<view class="right" style="color:#f81b1e">
					{{item.amount}}
				</view>
			</view>
			<uni-load-more  :status="more">
			</uni-load-more>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	
	
	export default {
		data() {
			return {
				nowpage:1,
				more:'loading',
				yishoulist:[],
				dxiaoshou:[{id:123}],
				xiaoshou:{
					sales:[]
				},
				wodelist:[],
				wodetype:1,
				nowindex:1,
				nowdata:{},
				tuangou:[]
			}
		},
		onShow(){
			this.nowindex=this.tuangoutype
			this.tabClick(this.tuangoutype)
		},
		computed: {
			
			...mapState([
				'tuangoutype'
			])
		},
		onLoad() {
			this.nowindex=this.tuangoutype
			this.getData()
		},
		onReachBottom() {
		 	if(this.more=='nomore'){
		 		return
		 	}
		 	this.getwodelist()	
		},
		methods: {
			...mapMutations(['settuantoutype']),
			jinru(item){
				let data=JSON.stringify(item)
				uni.navigateTo({
				    url: '/pages/daishouchulist/index'+`?data=${data}`
				});
			},
			enterdaixiaoshou(item){
				let data=JSON.stringify(item)
				uni.navigateTo({
				    url: '/pages/daixiaoshouliebiao/index'+`?data=${data}`
				});
			},
			getxiaoshou(){
				
				
				
				let that=this
				
				if(this.wodetype==1){
					that.apipost('/api/groupbuy/entire_network_sales').then(res => {
						if(res.Code==10200){
							let data=res.Data
							that.xiaoshou=data
							
						}
						
					}).catch(err=>{
						console.log(err)
					});
				}else{
					that.apipost('/api/groupbuy/my_sales',{
						page:that.nowpage
					},true).then(res => {
						if(res.Code==10200){
							
							let data=res.Data
							
							that.dxiaoshou=that.dxiaoshou.concat(data)
							++that.nowpage
							uni.stopPullDownRefresh()
							if(data.length<15){
								that.more='nomore'
							}
							
							
						}
						
					}).catch(err=>{
						console.log(err)
					});
				}
				
			},
			getData(){
				let that=this
				
				that.apipost('/api/groupbuy/index').then(res => {
					if(res.Code==10200){
						let data=res.Data
						that.tuangou=data
						
					}
					
				}).catch(err=>{
					console.log(err)
				});
			},
			tabxiaoshou(val){
				
				this.wodetype=val
				this.getxiaoshou()
			},
			tabClick(val){
				this.settuantoutype(val)
				
				this.nowindex=val
				this.nowpage=1
				this.more='loading'
				this.yishoulist=[]
				this.wodelist=[]
				this.dxiaoshou=[]
				switch(val){
					case 1:
					this.getData()
					break;
					case 2:
					this.getxiaoshou()
					break;
					case 3:
					this.getyishou()
					break;
					case 4:
					this.getwodelist()
					break;
					case 5:
					this.desc='员工股'
					break;
				}
				
				
				
			},
			
			getyishou(){
				let that=this
				
				that.apipost('/api/groupbuy/my_sell',{
					page:that.nowpage
				},true).then(res => {
					if(res.Code==10200){
						let data=res.Data
						
						that.yishoulist=that.yishoulist.concat(data)
						++that.nowpage
						uni.stopPullDownRefresh()
						if(data.length<15){
							that.more='nomore'
						}
					}
					
				}).catch(err=>{
					console.log(err)
				});
			},
			getwodelist(){
				let that=this
				
				that.apipost('/api/groupbuy/my_order',{
					page:that.nowpage
				},true).then(res => {
					if(res.Code==10200){
						let data=res.Data
						
						that.wodelist=that.wodelist.concat(data)
						++that.nowpage
						uni.stopPullDownRefresh()
						if(data.length<15){
							that.more='nomore'
						}
						
						
					}
					
				}).catch(err=>{
					console.log(err)
				});
			},
			enterpage(path){
				let data=JSON.stringify(path)
				if(!path.is_enter){
					uni.navigateTo({
					    url: '/pages/tuangoudetail/index'+`?data=${data}`
					});
				}
			}
		}
	}
</script>

<style>
	.waiting:after{
		content:'';
		display:block;
		width:320rpx;
		height:320rpx;
		position:absolute;
		right:0;
		top:0;
		background:url(/static/daiyushou.png) right 0 no-repeat;
		background-size:auto 55%;
	}
	.reservation:after{
		content:'';
		display:block;
		width:320rpx;
		height:320rpx;
		position:absolute;
		right:0;
		top:0;
		background:url(/static/yudingzhong.png) right 0 no-repeat;
		background-size:auto 55%;
	}
	.wodelist-item{
		border-radius:18rpx;
		font-size:34rpx;
		display:flex;
		align-items: center;
		justify-content: space-between;
		width:704rpx;
		height:144rpx;
		background:#fff;
		margin:0 auto;
		margin-bottom:26rpx;
		box-sizing: border-box;
		padding:22rpx 22rpx 22rpx 22rpx;
	}
	.shouchuzhong{
		background:url(/static/shouchuzhong.png) right 0 no-repeat #fff;
		background-size:auto 55%;
	}
	.on_sell{
		background:url(/static/xiaoshouzhong.png) right 0 no-repeat #fff;
		background-size:auto 55%;
	}
	.xiaoshou .list-wrap .list-item{
		font-size:34rpx;
		background:#fff;
		height:166rpx;
		box-sizing: border-box;
		margin-bottom:24rpx;
		padding:44rpx 28rpx 18rpx 28rpx;
		border-radius:18rpx;
	}
	.xiaoshou .list-wrap .xiaoshouzhong{
		background:url(/static/xiaoshouzhong.png) no-repeat right 0 #fff;
		background-size:auto 60%;
	}
	.xiaoshou .list-wrap{
		margin:0 auto;
		
		
		width:710rpx;
		
		
	}
	.card-xiaoshou{
		margin:0 auto;
		margin-bottom:30rpx;
	}
	.list-wrap .info{
		justify-content: space-between;
		display:flex;
	}
	.card-xiaoshou .dai{
		border-radius:20rpx;
		color:#fc5553;
		font-size:40rpx;
		font-weight:bold;
		background:#f8bfb4;
		padding-top:36rpx;
		text-align: center;
		box-sizing: border-box;
		width:344rpx;
		height:244rpx;
	}
	.card-xiaoshou .yi{
		border-radius:20rpx;
		color:#fc5553;
		font-size:40rpx;
		font-weight:bold;
		background:#fee19d;
		padding-top:36rpx;
		text-align: center;
		box-sizing: border-box;
		width:344rpx;
		height:244rpx;
	}
	.card-xiaoshou{
		display:flex;
		justify-content: space-between;
		width:710rpx;
	}
	.xiaoshou .active:after{
		content:'';
		height:1rpx;
		background:#fff;
		width:70rpx;
		position:absolute;
		top:62rpx;
	}
	.xiaoshou .title .list-nav{
		width:50%;
		position:relative;
		display:flex;
		align-items: center;
		justify-content: center;
		color:#fff;
	}
	.xiaoshou .title{
		margin-bottom:34rpx;
		display:flex;
		justify-content: space-between;
		height:84rpx;
		background:linear-gradient(to right,#ff5452,#ff7946)
	}
	.tuangou-desc .price{
		position:relative;
		
		color:#f24905;
	}
	.tuangou-desc{
		justify-content: space-between;
		height:114rpx;
		align-items: center;
		display:flex;
		border-bottom-left-radius: 22rpx;
		border-bottom-right-radius: 22rpx;
		background:#fff;
		padding:16rpx 30rpx 0 30rpx;
	}
	.tuangou-item{
		
		font-size:38rpx;
		margin-bottom:32rpx;
		border-radius:22rpx;
	}
	.tuangou{
		width:720rpx;
		margin:0 auto;
	}
	.tuangou .img-wrap{
		position:relative;
		width:100%;
		height:280rpx;
		border-top-left-radius: 22rpx;
	}
	
	.tuangou .img-wrap uni-image{
		border-top-right-radius: 22rpx;
		border-top-left-radius: 22rpx;
	}
	
	.no-data{
		background:#fff;
		display:flex;
		align-items: center;
		height:94rpx;
		justify-content: center;
		color:#909090;
	}
	.mingxi-wrap{
		color:#828282;
		width:702rpx;
		margin:0 auto;
		margin-bottom:38rpx;
		height:98rpx;
		
		background-size:18rpx;
		padding-left:32rpx;
		display:flex;
		align-items: center;
	}
	.info-wrap .title{
		border-bottom:1rpx solid #fff;
		height:50%;
		display:flex;
		align-items: center;
		justify-content: center;
		color:#fff;
	}
	.info-wrap .num{
		display:flex;
		align-items: center;
		justify-content: center;
		color:#fff;
		height:50%
	}
	.info-wrap{
		border-radius: 10rpx;
		padding:0 32rpx;
		box-sizing: border-box;
		width:710rpx;
		height:180rpx;
		background: linear-gradient(to bottom,#89b3ed,#4b8be2);
		margin:0 auto;
		margin-top:30rpx;
	}
	.active{
		color:#006ffd;
		
	}
	.menu{
		background:#fff;
		margin-bottom:30rpx;
		padding:20rpx 0;
		border-bottom:2rpx solid #dfdfdf;
	}
	.tab-change{
		width:100%;
		overflow-x: auto;
		overflow-y: hidden;
		height:48rpx;
		align-items: center;
		
		display:flex;
		justify-content: space-around;
		
	}
	.tab-change .tab-item{
		font-size:34rpx;
		box-sizing: border-box;
		height:100%;
		display: flex;
		justify-content: center;
		align-items: center;
		width:200rpx;
		color:#827e7f;
		text-align: center;
		position:relative;
	}
	
	.tab-change .active{
		color:#f74169;
	}
	.tab-change .active:after{
		content:'';
		display:block;
		width:40rpx;
		height:2rpx;
		position:absolute;
		top:44rpx;
		background:#f74169;
		
	}
	page{
		background:#f7f7f7;
	}
	.paiduizhong{
		background:url(/static/paiduizhong.png) right 0 no-repeat #fff;
		background-size:auto 55%;
	}
	.completed{
		background:url(/static/yiwancheng.png) right 0 no-repeat #fff;
		background-size:auto 55%;
	}
</style>
